<!DOCTYPE html>
<html>
<head>
    <title>Flat color picker</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">

    <div class="demo-section">
        <div id="bike">
            <div id="bike-tail" class="inline-block"></div><div id="bike-head" class="inline-block"></div>
        </div>

        <div class="picker-wrapper inline-block">
            <h3 class="title">Tail color</h3>
            <div id="tail" class="picker"></div>
        </div>
        <div class="picker-wrapper inline-block">
            <h3 class="title">Front &amp; side color</h3>
            <div id="head" class="picker"></div>
        </div>
    </div>

    <style scoped>
        .demo-section {
            text-align: center;
            width: 580px;
            padding-bottom: 16px;
        }

        .title {
            font-weight: normal;
            text-transform: uppercase;
            color: #666;
        }

        #bike {
            margin: -10px -10px 0;
            background: url(../../content/web/colorpicker/background.png);
        }

        #bike-head, #bike-tail {
            background: url(../../content/web/colorpicker/motor.png);
            height: 299px;
            width: 241px;
        }

        #bike-tail {
            background-color: #000;
        }

        #bike-head {
            background-color: #e15613;
            background-position: -241px 0;
        }

        .picker-wrapper {
            text-align: left;
            width: 252px;
            margin: 0 18px;
        }

        .picker-wrapper .k-hsv-gradient {
            height: 140px;
        }

        .picker-wrapper h3 {
            padding: 13px 0 5px;
            text-align: left;
        }

        .inline-block {
            display: inline-block;
        }

        .k-ie7 .inline-block {
            display: inline;
            zoom: 1;
        }
    </style>

    <script>
        function select(e) {
            $("#bike-" + this.element.attr("id")).css("background-color", e.value);
        }

        $("#tail").kendoFlatColorPicker({
            preview: false,
            value: "#000",
            change: select
        });

        $("#head").kendoFlatColorPicker({
            preview: false,
            value: "#e15613",
            change: select
        });
    </script>

</div>

	
			
</body>
</html>
